<template>
	<div>
		<view class="guide" @touchmove.stop.prevent="moveHandle" v-if="showGuide">
		    <view
		        :style="{'width':getStyle.width,'left':getStyle.left,'top':getStyle.top,'boxShadow':getStyle.boxShadow,'borderRadius':getStyle.borderRadius,'margin':getStyle.margin}"
		        class="guide-box"
		        catchtouchmove="true">
		        <view class="tips" :style="{left: guideInfo.tipStyle.left}">
		            <view class="text">{{ guideInfo.tips }}</view>
		            <view class="next">
		              <text @click="next">{{ guideInfo.next }}</text>
		            </view>
		        </view>
		        <view class="arrow"></view>
		    </view>
		</view>
	</div>
</template>

<script>
	export default {
		name: 'guide',
		props: {
			index: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				//操作引导
				guideList: [{
				    el: '.position', // 需要高亮的元素，这里最好唯一
				    tips: '用户：客户、项目、承运商、司机、车辆记录及管理', // 提示文字
				    next: 'OK', // 下一步按钮显示文字
				    style: { // 高亮样式
				        borderRadius: '12rpx',
				        margin: '-10rpx 0 0 -10rpx',
						left:'5',
						top:'74'
				    },
				    tipStyle: { // tips样式
				        left: '20rpx'
				    }
				}, {
				    el: '.position',
				    tips: '货源：记录客户货源列表、订单列表',
				    next: 'OK',
				    style: {
				        borderRadius: '12rpx',
				        margin: '-10rpx 0 0 -32rpx',
						left:'32',
						top:'74'
				    },
				    tipStyle: {
				        left: '-66rpx'
				    },
				}, {
				    el: '.position',
				    tips: '运营：运单创建、退货、运单运营管理、车次跟踪',
				    next: 'OK',
				    style: {
				        borderRadius: '12rpx',
				        margin: '-10rpx 0 0 -32rpx',
						left:'57',
						top:'74'
				    },
				    tipStyle: {
				        left: '-220rpx'
				    }
				}, {
				    el: '.position',
				    tips: '我的：用户、账号、账户、运单收付、发票、消息、统计',
				    next: 'OK',
				    style: {
				        borderRadius: '12rpx',
				        margin: '-10rpx 0 0 -32rpx',
						left:'82',
						top:'74'
				    },
				    tipStyle: {
				        left: '-300rpx'
				    }
				}],
				showGuide: true, // 是否显示引导
				tipTop:600,
			}
		},
		created() {
			var guide = uni.getStorageSync('guide_key');
			if (!guide) {
				this.getDomInfo();
			} else {
			    this.showGuide = false;
			}
		},
		computed: {
		    guideInfo() {
		        return this.guideList[this.index];
		    },
		    getStyle () {
		        const { width, height, left, top, style } = this.guideInfo;
				let value={
		            width: 120 + 'rpx',
		            height: 120 + 'rpx',
		            left: style.left + '%',
		            top: (this.tipTop-123) + 'px',
		            boxShadow: 'rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px',
					borderRadius:style.borderRadius,
					margin:style.margin
		        }
		        return value
		    }
		},
		methods:{
			getDomInfo () {
			    const { el } = this.guideInfo;
			    const query = uni.createSelectorQuery().in(this.$root);
			    setTimeout(() => {
			        query.select(el).boundingClientRect(data => {
			            if (data) {
			                // const index = this.index;
			                // this.guideList.splice(index, 1, {
			                //     ...this.guideList[index],
			                //     left: data.left,
			                //     top: data.top,
			                //     width: data.width,
			                //     height: data.height
			                // });
							this.tipTop=data.top
			            }
			        }).exec();
			    }, 10)
			},
			next () {
				this.showGuide = false;
			    if (this.$store.getters.guide_index === this.guideList.length - 1) {
			        uni.setStorageSync('guide_key', 'true');
			    } else {
					this.$store.dispatch('addGuide_index',1) //引导序号+1
			        this.getDomInfo();
			    }
			},
			moveHandle () {
			    return false;
			},
		}
	}
</script>

<style scoped>
	.guide {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0px;
	    z-index: 1000;
	}
	.guide-box {
	    position: fixed;
	    z-index: 100;
	    transition: all 0.2s;    
	}
	/* .guide-box::before {
	        content: '';
	        height: 140rpx;
	        width: 140rpx;
	        border: 1px dashed #fff;
	        border-radius: 12rpx;
	        position: absolute;
	        top: -12rpx;
	        left: -12rpx;
	    } */
	.tips {
	    background: #DC5F45;
	    box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
	    color: #fff;
	    position: absolute;
	    top: 152rpx;
	    left: -50%;
	    padding: 15rpx 20rpx;
	    font-size: 28rpx;
	    border-radius: 12rpx;
	}
	.text {
	   /* white-space: nowrap; */
	   width: 200px;
	}
	.next {
	  text-align: right;
	  padding-right: 0rpx;
	  margin-top: 10rpx;
	}
	.arrow {
	    height: 20rpx;
	    width: 20rpx;
	    background: #DC5F45;
	    position: absolute;
	    /* top: 144rpx; */
		/* top: 252rpx; */
		top:292rpx;
	    left: 50%;
	    transform: rotate(45deg);
	}
</style>